<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="dist/css/quicktab.css">

    <style>
        .container {
            padding: 30px;
        }
    </style>

</head>

<body>

    <div class="container">
        <div class="quicktab reverse q-tab-1">

            <!-- tab工具栏部分 -->
            <ul class="tab-bar">
                <li class="prev">
                    <button class="disabled">
                        <svg viewBox="0 0 16 16">
                            <path
                                d="M10 12.796V3.204L4.519 8 10 12.796zm-.659.753-5.48-4.796a1 1 0 0 1 0-1.506l5.48-4.796A1 1 0 0 1 11 3.204v9.592a1 1 0 0 1-1.659.753z" />
                        </svg>
                    </button>
                </li>
                <li class="refresh">
                    <button>
                        <svg viewBox="0 0 16 16">
                            <path fill-rule="evenodd"
                                d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
                            <path
                                d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
                        </svg>
                    </button>
                </li>
                <li class="scroll">
                    <button><span>首页</span></button>
                    <button><span>文章管理</span></button>
                    <button class="active">
                        <span>库存管理库存管理库存管理</span>
                        <svg viewBox="0 0 16 16">
                            <path
                                d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
                        </svg>
                    </button>
                    <button>
                        <span>商品管理商品管理商品管理</span>
                        <svg viewBox="0 0 16 16">
                            <path
                                d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
                        </svg>
                    </button>
                    <button><span>tab1</span></button>
                    <button><span>tab2</span></button>
                    <button><span>tab3</span></button>
                    <button><span>tab4</span></button>
                    <button><span>tab5</span></button>
                    <button><span>tab6</span></button>
                    <button><span>tab7</span></button>
                    <button><span>tab8</span></button>
                    <button><span>tab9</span></button>
                    <button><span>tab10</span></button>
                    <button><span>tab11</span></button>
                    <button><span>tab12</span></button>
                    <button><span>tab13</span></button>
                    <button><span>tab14</span></button>
                    <button><span>tab15</span></button>
                    <button><span>tab16</span></button>
                    <button><span>tab17</span></button>
                    <button><span>tab18</span></button>
                    <button><span>tab19</span></button>
                    <button><span>tab20</span></button>
                    <button><span>tab21</span></button>
                    <button><span>tab22</span></button>
                    <button><span>tab23</span></button>
                    <button><span>tab24</span></button>
                    <button><span>tab25</span></button>
                    <button><span>tab26</span></button>
                    <button><span>tab27</span></button>
                    <button><span>tab28</span></button>
                    <button><span>tab29</span></button>
                    <button><span>tab30</span></button>
                </li>
                <li class="next ">
                    <button>
                        <svg viewBox="0 0 16 16">
                            <path
                                d="M6 12.796V3.204L11.481 8 6 12.796zm.659.753 5.48-4.796a1 1 0 0 0 0-1.506L6.66 2.451C6.011 1.885 5 2.345 5 3.204v9.592a1 1 0 0 0 1.659.753z" />
                        </svg>
                    </button>
                </li>
                <li class="dropdown">
                    <button>
                        <svg viewBox="0 0 16 16">
                            <path
                                d="M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z" />
                        </svg>
                    </button>
                </li>
                <li class="fullscreen">
                    <button>
                        <svg viewBox="0 0 16 16">
                            <path
                                d="M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1h-4zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zM.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5zm15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5z" />
                        </svg>
                    </button>
                </li>
            </ul>

            <!--  面板容器部分  -->
            <ul class="tab-body">
                <li>
                    <div class="mask">
                        <div class="mask-inner">
                            <div class="quicktab-loaders">
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                        </div>
                    </div>
                    <iframe src="page1.html"></iframe>
                </li>
                <li class="active">
                    <iframe src="page2.html"></iframe>
                </li>
            </ul>
        </div>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>

    <script>

        $('.prev').on('click', function () {
            const scroll = document.querySelector('.tab-bar li.scroll');

            scroll.scrollTo({
                left: scroll.scrollLeft - scroll.offsetWidth,
                behavior: 'smooth'
            })

        })

        $('.next').on('click', function () {
            const scroll = document.querySelector('.tab-bar li.scroll');

            scroll.scrollTo({
                left: scroll.scrollLeft + scroll.offsetWidth,
                behavior: 'smooth'
            })
        })
    </script>

</body>

</html>
